<script setup lang="ts">
import {ref} from "vue";
  let student = ref<{
    id:number,
    firstname:string,
    lastname:string
  } |null >(null)
  student.value = {
    id:66,
    firstname:"张",
    lastname:"三"
  }
  // let name = ref("")
  // let fullname = computed(()=>{
  //   return student.value?.firstname+"-"+student.value?.lastname
  // })

  const prpos = defineProps<{
    age:number
  }>()
  const emit = defineEmits(["add","xxx"])

</script>
<template>
    <div id="student">
        <h2>Demo.vue</h2>
        <div>姓:{{ student?.firstname }}</div>
        <div>名:{{ student?.lastname }}</div>
        <div>名字:{{ fullname }}</div>
        姓:<input type="text"  v-model="student.firstname"/><br>
        名:<input type="text"  v-model="student.lastname"/><br>
        姓(v-bind):<input v-bind:value="student.firstname"/><br>
        年龄:{{ prpos.age }}
        <button @click="emit('add')">增加</button>
        <slot :item="" v-for="item in ss" :key="item.id"></slot>
        <slot name="footer"></slot>
    </div>
</template>